<template>
  <keep-alive>
    <div v-for="(item,index) in data">
      <div style="margin-bottom: 10px">
        <span style="color: #646cff">作品标题:</span>
        <span>{{ item.title }}</span>
        <p>上传作品用户姓名:{{ item.username }}</p>
        <vue3VideoPlay v-bind=options[index]
                       :poster=item.image>
        </vue3VideoPlay>
      </div>
    </div>
  </keep-alive>
</template>
<script setup>
import {onMounted, reactive, ref} from 'vue';
import API from "../plugins/axiosInstance.js";
//http://localhost:7529/api/8b081ef3b2da4d46b8e88dfe6e607a99.mp4
let baseUrl = 'http://localhost:8080/jeecg-boot/'
let options = reactive([])
let data = ref([])
onMounted(() => {
  API({
    url: '/student/selectAll',
    method: 'get',
  }).then((res) => {
    let option = reactive({
      width: '100%', //播放器高度
      height: '100%', //播放器高度
      color: "#409eff", //主题色
      src: "", //视频源
      muted: false, //静音
      webFullScreen: false,
      speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
      autoPlay: false, //自动播放
      loop: false, //循环播放
      mirror: false, //镜像画面
      ligthOff: false,  //关灯模式
      volume: 0.3, //默认音量大小
      control: true, //是否显示控制器
    })
    for (let i of res.data.data) {
      //处理我们的图片
      i.image = baseUrl + i.image
      i.file = baseUrl + i.file
      console.log(i.file)
      option.src = i.file
      options.push(option)
    }
    data.value = res.data.data
  });
})
</script>
<style scoped>
</style>